<template>
  <div class="notices-detail">
    <span class="back" @click="$router.back()">返回</span>
    <!-- 头部 -->
    <div class="detail-header">
      <div class="title">
        <h3>{{ notice.title }}</h3>
      </div>
      <div class="info">
        <span><el-icon class="icon"><Avatar /></el-icon>发布者：{{notice.publisher}}</span>
        <span><el-icon class="icon"><StarFilled /></el-icon>接收者：{{subscriber(notice.subscriber)}}</span>
        <span><el-icon class="icon"><Timer /></el-icon>发布日期：{{notice.pub_date}}</span>
      </div>
    </div>
    <!-- 公告内容 -->
    <div class="detail-content" v-html="notice.content"></div>
  </div>
</template>

<script setup>
import { Timer, Avatar,StarFilled } from '@element-plus/icons-vue'
import { ref, watch } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

const store = useStore()
const route = useRoute()
const notice = ref(null)

watch(() => route.params.id, newVal => {
  if (newVal) {
    // notice.value = computed(() => store.getters['noticesManageModule/getNoticeById'](newVal))
    notice.value = store.getters['noticesManageModule/getMyNoticeById'](newVal)
  }
}, {
  immediate: true
})

// 转换接收对象
const subscriber = (num) => {
  return num === '0' ? '管理员' : num === '1' ? '教师' : num === '2' ? '学生' : '所有人'
}

</script>

<style lang="less" scoped>
.notices-detail {
  width: 100%;
  height: 100%;
  position: relative;
  .back {
    padding: 2px 6px;
    position: absolute;
    right: 10px;
    top: -25px;
    letter-spacing: 2px;
    cursor: pointer;
  }
  .back:hover {
    color: #409eff;
  }
  .detail-header {
    // padding-left: 20px;
    text-align: center;
    .title {
      padding-right: 28px;
      font-size: 24px;
    }
    .info {
      font-size: 14px;
      color: #828a92;
      span {
        margin-right: 30px;
        .icon {
          vertical-align: bottom;
          margin-right:5px;
        }
      }
    }
  }
  .detail-content {
    padding: 20px 100px;
  }
}
</style>
